<template>
  <div>
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1">
        <span slot="tab"> 货币结算配置 </span>
        <a-button class="add-btn" type="primary" @click="addCurrency"
          >新增</a-button
        >
        <a-table
          v-if="tabKey == 1"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :scroll="{ x: 1500 }"
        >
          <span slot="action" slot-scope="text, record">
            <a
              href="javascript:;"
              style="text-decoration: underline; color: rgb(41, 41, 224)"
              @click="editCurrency(record)"
              >编辑
            </a>
          </span>
        </a-table>
        <!-- 分页器 -->
        <div style="margin: 20px 0; text-align: center">
          <a-config-provider>
            <a-pagination
              :current="searchData.current"
              show-size-changer
              :pageSizeOptions="['10', '20', '30']"
              :show-total="
                (total) =>
                  `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
              "
              @showSizeChange="showChange"
              :buildOptionText="
                (props) =>
                  ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
              "
              show-quick-jumper
              :default-current="searchData.current"
              :total="total"
              @change="onChangePage"
            />
          </a-config-provider>
        </div>
      </a-tab-pane>

      <a-tab-pane key="2">
        <span slot="tab"> 购买运单配置 </span>

        <Waybillconfiguration v-if="tabKey == 2" />
      </a-tab-pane>
    </a-tabs>

    <ParameterizeModel :getTableList="getTableList" />
  </div>
</template>

<script>
import ParameterizeModel from "@/components/system/setManage/ParameterizeModel.vue";
import Waybillconfiguration from "@/components/system/setManage/Waybillconfiguration.vue";
import { para_tabelList } from "@/apis/system/setManage/parameterize";
export default {
  components: {
    ParameterizeModel,
    Waybillconfiguration,
  },
  data() {
    return {
      modalTotal: 0,
      total: 0,
      searchData: {
        size: 10,
        current: 1,
      },
      tableData: [],
      tabKey: 1,
      addFlag: false,
    };
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTableList();
    },
    //分页器事件
    outPutInStorageChangePage(pageNumber) {
      this.searchData.current = pageNumber;
    },
    //页码变更
    outPutInStorageShowChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
    },
    //选项卡更改
    callback(key) {
      this.tabKey = key;
    },
    editCurrency(record) {
      this.$bus.$emit("editCurrency", record, "edit");
    },
    //新增币种配置
    addCurrency() {
      this.$bus.$emit("addCurrency", "add");
    },
    async getTableList() {
      let res = await para_tabelList(this.searchData);
      if (res.code == "200") {
        this.total = Number(res.responseBody.total);
        this.tableData = res.responseBody.records;
        this.tableData.forEach((item) => {
          if (item.isCurrency == "0") {
            item.isCurrency = "是";
          } else {
            item.isCurrency = "否";
          }
        });
      }
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "币种",
          dataIndex: "currency",
          align: "center",
          scopedSlots: { customRender: "currency" },
          width: "15%",
        },
        {
          title: "兑换币种",
          dataIndex: "exchangeCurrency",
          align: "center",
          scopedSlots: { customRender: "exchangeCurrency" },
          width: "15%",
        },
        {
          title: "实时汇率",
          dataIndex: "streamRate",
          align: "center",
          scopedSlots: { customRender: "streamRate" },
          width: "15%",
        },
        {
          title: "兑换实时汇率",
          dataIndex: "exchangeStreamRate",
          align: "center",
          scopedSlots: { customRender: "exchangeStreamRate" },
          width: "15%",
        },
        {
          title: "是否交易币种",
          dataIndex: "isCurrency",
          align: "center",
          scopedSlots: { customRender: "isCurrency" },
          width: "15%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "15%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.add-btn {
  margin: 15px 0;
}
</style>
